<template>
  <div style="background-color: #F5F5F5;padding: 20px" class="awsCenter">
    <div style="background-color: white; width: 60%; border-radius: 25px; padding: 20px;">
      <div class="awsCenter" style="flex-direction: column">
        <text style="font-weight: bold;font-size: 23px;margin-bottom: 30px">来访者反馈表</text>

        <el-form :model="feedbackForm" label-width="auto" style="width: 80%">
          <div class="awsCenter" style="border: 0px black solid;width: 100%">
            <div style="display: flex;flex-direction: row">
              <el-form-item label-position="left" label="心理咨询师姓名">
                <el-select :disabled="isDisabled" style="width: 200px" v-model="feedbackForm.counselorid" placeholder="请选择">
                  <el-option
                      v-for="item in counselorList"
                      :key="item.counselorid"
                      :label="item.realname"
                      :value="item.counselorid"
                  />
                </el-select>
              </el-form-item>
              <el-form-item style="margin-left: 100px" label-position="left" label="日期时间">
                <el-date-picker
                    v-model="feedbackForm.createdat"
                    :disabled="isDisabled"
                    type="datetime"
                    placeholder="请选择"
                    :default-time="defaultTime"
                />
              </el-form-item>
            </div>
          </div>

          <!--   指导语     -->
          <div style="width: 100%;border-top: black 3px solid;border-bottom: 3px solid black;display: flex;flex-direction: column;padding: 3px">
            <text style="font-weight: bold">指导语：</text>
            <text>对以下每个表述进行7分量表评分,1分表示“非常赞同”,7分表示“非常不赞同”，处于中点的分数表示“中立”。(选择你认为合适的分数)</text>
          </div>

          <!--     示例框     -->
          <div style="width: 100%;height: 100px;border: 0px solid black;padding-top: 10px;padding-right: 10px">
              <div style="flex-direction: column;border: 1px solid black;width: 300px;margin-left: auto;padding: 10px" class="awsCenter">
                <div>
                  <text>非常赞同</text><text style="margin-left: 50px">中立</text><text style="margin-left: 50px">非常不赞同</text>
                </div>
                <text style="margin-top: 10px">1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7</text>
              </div>
          </div>

          <!--   题目区域       -->
          <div style="width: 100%;flex-direction: column;padding: 20px" >
            <div v-for="(item, index) in topicList" class="awsCenter" style="flex-direction: column;width: 100%" :key="index">
              <span style="margin-right: auto;" v-html="item"></span>
              <!--每个题目后面跟一个评分区域-->
              <el-form-item  style="margin-top: 20px;width: 100%;"  >
                <!--创建一组 1~7 的单选框；-->
                <el-radio-group style="margin-left: 25%" v-model="ratingList[index]"  :disabled="isDisabled">
                  <div><el-radio :value="1">1</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="2">2</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="3">3</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="4">4</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="5">5</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="6">6</el-radio></div>
                  <div style="margin-left: 20px"><el-radio :value="7">7</el-radio></div>
                </el-radio-group>
              </el-form-item>
            </div>

          </div>

          <!--    主观反馈     -->
          <div style="width: 100%;margin-top: 50px;display: flex;flex-direction: column">
            <text style="font-weight: bold;font-size: 21px">主观反馈：</text>
            <text style="margin-top: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你发现这有什么帮助?心理咨询师做了哪些正确的事情?想想他们会说什么，他会如何倾听，也许还有他的身体语言。必须很具体，例如，不是“你做得很好”，而是“在我谈到____________时，你很认真地倾听。”</text>
            <text style="margin-top: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;万一心理咨询师没有把据住你今天或这次会谈想要探讨的问题呢?&nbsp;如果他没做到，你会怎么做?</text>
            <text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;麻烦你在下方空白处，写出其他的想法或建议。</text>

            <el-form-item style="margin-top: 20px">
              <el-input  :disabled="isDisabled" v-model="feedbackForm.content" type="textarea" rows="10" style="width: 100%"></el-input>
            </el-form-item>
            <text style="margin-left: auto">(&nbsp;感谢！！！)</text>
          </div>

        </el-form>

        <div style="display: flex;margin-top: 20px;">
          <el-button  :disabled="isDisabled" @click="submitFeedback" color="#8adba0" type="primary">
            <text style="color:white;">点击提交</text>
          </el-button>
        </div>
      </div>


    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getAllCounselorService, getByAppIdService, submitFeedbackService} from "@/api/feedback.js";
import {useUserStore} from "@/stores/user/user.js";//用于获取当前登录用户信息或用户操作；
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
const route = useRoute();
const userStore=useUserStore()//创建 userStore 实例，用于获取当前登录用户信息；
const counselorList=ref([])//定义一个响应式数组，用于存储所有咨询师列表；
const defaultTime=ref(new Date())

const appointmentid=ref('')//用于存储当前预约记录的 ID，后续用于查询或提交反馈表单
onMounted(async ()=>{ //组件挂载后立即执行该回调逻辑
  counselorList.value.push({  //读取 id 和 name，添加到咨询师列表中
    counselorid:route.query.id,
    realname:route.query.name
  })
  feedbackForm.value.counselorid=route.query.id//将咨询师 ID 赋值给反馈表
  appointmentid.value=route.query.appointmentid//获取预约 ID，存储起来，后续查询反馈详情、提交反馈

  let flag=route.query.flag
  console.log(flag)
  if (flag=='true'){
    isDisabled.value=true//后续用于禁用评分控件等交互；
    console.log("当前为查看状态")
    //数据回写
    const res=await getByAppIdService(appointmentid.value)//通过预约 ID 获取已有反馈数据；
    if (res.code===200){
      feedbackForm.value={...res.data}
      feedbackForm.value.number=JSON.parse(res.data.number)
      ratingList.value=feedbackForm.value.number.numList
      feedbackForm.value.counselorid=route.query.name
    }
  }

})
const ratingList=ref([0,0,0,0,0,0,0])

const feedbackForm=ref({
  appointmentid:'',
  userid:'',
  counselorid:'',
  number: {},
  content:'',
  rating:(0).toFixed(2),
  createdat:new Date()
})

const topicList=ref([
    `1.&nbsp;(&nbsp;会谈开始和自我介绍&nbsp;)&nbsp;心理咨询师向我解释了会谈的目的、接下来会出现的情况，并讨论了咨询的保密性和相关问题。`,
    `2.&nbsp;(&nbsp;意识&nbsp;)&nbsp;会谈帮助我更好地理解我的决定、困难问题或改变的机会。`,
    `3.&nbsp;(&nbsp;意识&nbsp;)&nbsp;心理咨询师倾听我。我感觉被人倾听了。`,
    `4.&nbsp;(&nbsp;知识&nbsp;)&nbsp;今天我对我自己有了更好的理解。`,
    `5.&nbsp;(&nbsp;知识&nbsp;)&nbsp;我学会用不同的方式来看待我的决定、困难、问题或改变的机会。`,
    `6.&nbsp;(&nbsp;技巧&nbsp;)&nbsp;这次会谈帮助我识别出有助我解决问题和困难的特定能力和资源。`,
    `7.&nbsp;(&nbsp;行动&nbsp;)&nbsp;我将采取行动，做一些事情,在这次会谈后改变思考方式、感受和行为方式。`
])

const submitFeedback=(async ()=>{
  feedbackForm.value.number=JSON.stringify({
    "numList":ratingList.value
  })
  feedbackForm.value.appointmentid=appointmentid.value
  feedbackForm.value.userid=userStore.user.userid
  let sum=0
  let count=0
  ratingList.value.forEach(item=>{
    if (item!=0){
      sum++
      count+=item
    }
  })
  if (sum===7){
    feedbackForm.value.rating=(count/7).toFixed(2)

    let res=await submitFeedbackService(feedbackForm.value)
    if (res.code===200){
      isDisabled.value=true
      ElMessage.success(res.message)
    }else {
      ElMessage.warning(res.errMsg)
    }

  }else {
    ElMessage.warning("未完成打分请检查")
  }
  console.log(feedbackForm.value)
})

const isDisabled=ref(false)

</script>

<style>

.awsCenter{
  display: flex;
  align-items: center;
}
</style>